<template>
  <Card>
    <span slot="title">申报资格管理</span>
    <div slot="content">
      <div class="application_qualification_management">
        <div class="application_qualification_management_header">
          <el-form :inline="true" :model="searchForm" size="small">
            <el-form-item label="申报资格">
              <el-select v-model="searchForm.name" placeholder="请选择资格">
                <el-option
                  v-for="item in selectOptions"
                  :key="item.uuid"
                  :label="item.name"
                  :value="item.name"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="申报状态">
              <el-select v-model="searchForm.status" placeholder="请选择状态">
                <el-option label="正常" value="0"></el-option>
                <el-option label="禁用" value="-1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <we-button type="primary" @click="handleSearch" size="small"
                ><i class="el-icon-search"></i> 查询</we-button
              >
              <we-button @click="handleReset" size="small">
                <i class="el-icon-refresh"></i> 重置</we-button
              >
            </el-form-item>
          </el-form>
          <div class="button_item">
            <we-button
              size="small"
              type="primary"
              @click="addDialogFormVisible = true"
              ><i class="el-icon-plus"></i> 添加</we-button
            >
          </div>
        </div>
        <!-- 添加模态框 -->
        <el-dialog
          width="30%"
          class="addDialog"
          title="添加资格"
          :visible.sync="addDialogFormVisible"
        >
          <el-form :model="addForm" :rules="addFormRules" ref="addForm">
            <el-form-item prop="name" label="资格名称" label-width="80px">
              <el-input
                v-model="addForm.name"
                placeholder="请填写资格名称"
              ></el-input>
            </el-form-item>
            <el-form-item
              prop="orderNumber"
              label="资格排序"
              label-width="80px"
            >
              <el-input
                placeholder="请填写资格排序"
                v-model.number="addForm.orderNumber"
              ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <we-button size="small" @click="addDialogFormVisible = false"
              >取 消</we-button
            >
            <we-button size="small" type="primary" @click="submitAdd"
              >确 定</we-button
            >
          </div>
        </el-dialog>
        <!-- 表格 -->
        <div class="application_qualification_management_table">
          <el-table size="mini" :data="tableData" :header-cell-style="headerStyle" stripe>
            <el-table-column label="#" type="index" width="50">
            </el-table-column>
            <el-table-column label="申报资格" prop="name"> </el-table-column>
            <el-table-column label="显示顺序" prop="orderNumber" align="center">
            </el-table-column>
            <el-table-column label="状态">
              <template slot-scope="scope">
                <span
                  :style="
                    scope.row.status === 0 ? 'color:green' : 'color:orange'
                  "
                  >{{ scope.row.status === 0 ? "正常" : "禁用" }}</span
                >
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              header-align="center"
              label="操作"
              width="230px"
            >
              <template slot-scope="scope">
                <we-button
                  type="primary"
                  size="mini"
                  @click="handleEdit(scope.row)"
                  ><i class="el-icon-edit"></i> 编辑</we-button
                >
                <we-button
                  @click="handleDel(scope.row)"
                  size="mini"
                  type="danger"
                  ><i class="el-icon-delete"></i> 删除</we-button
                >
                <we-button
                  @click="changeStatu(scope.row)"
                  size="mini"
                  :type="scope.row.status === 0 ? 'warning' : 'success'"
                  ><i
                    :class="
                      scope.row.status === 0
                        ? 'el-icon-remove'
                        : 'el-icon-video-play'
                    "
                  ></i>
                  {{ scope.row.status === 0 ? "禁用" : "启用" }}</we-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 编辑模态框 -->
          <el-dialog
            width="30%"
            class="editDialog"
            title="修改资格"
            :visible.sync="editDialogFormVisible"
          >
            <el-form :model="editForm" :rules="editFormRules" ref="editForm">
              <el-form-item prop="name" label="修改资格" label-width="80px">
                <el-input
                  v-model="editForm.name"
                  placeholder="请填写资格名称"
                ></el-input>
              </el-form-item>
              <el-form-item
                prop="orderNumber"
                label="显示排序"
                label-width="80px"
              >
                <el-input
                  v-model.number="editForm.orderNumber"
                  placeholder="请输入显示排序"
                ></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <we-button size="small" @click="editDialogFormVisible = false"
                >取 消</we-button
              >
              <we-button size="small" type="primary" @click="submitEdit"
                >确 定</we-button
              >
            </div>
          </el-dialog>
          <!-- 分页 -->
          <div class="pagination">
            <we-Pagination
              :page="pagination.pageNum"
              :pageSize="pagination.pageSize"
              :total="pagination.total"
              @currentChange="currentChange($event)"
            >
              ></we-Pagination
            >
          </div>
        </div>
      </div>
    </div>
  </Card>
</template>

<script>
import Card from "@/components/Card";
import WeButton from "@/components/WeButton";
import WePagination from "@/components/WePagination";
import {
  getQualificationList, // 获取申报资格管理列表
  getShenbaoDownWindow, //获取查询下拉
  delQualification, //删除资格
  qualificationDisable, // 切换成禁用
  qualificationActive, // 切换成启用
  addEditqualification, //添加修改资格
  editQualificationShow, //修改界面展示
} from "@/api/titleDeclaration";
export default {
  components: {
    Card,
    WeButton,
    WePagination,
  },
  data() {
    return {
      // 查询表单
      searchForm: {
        name: "",
        status: "",
      },
      selectOptions: [],
      // 添加表单
      addForm: {
        name: "",
        orderNumber: "",
      },
      // 添加规则
      addFormRules: {
        name: [
          { required: true, message: "请输入资格名称", trigger: "blur" },
          {
            min: 1,
            max: 50,
            message: "长度在 1 到 50 个字符",
            trigger: "blur",
          },
        ],
        orderNumber: [
          { required: true, message: "请输入显示排序", trigger: "blur" },
          {
            type: "number",
            min: 1,
            max: 999,
            message: "请输入大于0且长度小于4数字",
            trigger: "blur",
          },
        ],
      },
      addDialogFormVisible: false,
      // 修改表单
      editForm: {
        name: "",
        orderNumber: "",
        uuid: "",
      },
      // 修改规则
      editFormRules: {
        name: [
          { required: true, message: "请输入资格名称", trigger: "blur" },
          {
            min: 1,
            max: 50,
            message: "长度在 1 到 50 个字符",
            trigger: "blur",
          },
        ],
        orderNumber: [
          { required: true, message: "请输入显示排序", trigger: "blur" },
          {
            type: "number",
            min: 1,
            max: 999,
            message: "请输入大于0且长度小于4数字",
            trigger: "blur",
          },
        ],
      },
      editDialogFormVisible: false,
      tableData: [],

      // 分页数据
      pagination: {
        total: 1, // 总数据条数
        pageSize: 8, // 每页条数
        pageNum: 1, // 当前页`
      },
    };
  },

  methods: {
    // 表头样式回调
    headerStyle() {
      return "backgroundColor:#ddd;fontSize:14px;color:#666;fontWeight:700";
    },
    // 查询
    handleSearch() {
      this.pagination.pageNum = 1;
      this.fetchData();
    },
    // 重置
    handleReset() {
      this.searchForm = {
        name: "",
        status: "",
      };
      this.handleSearch();
    },
    // 添加
    submitAdd() {
      this.$refs.addForm.validate(async (valid) => {
        if (valid) {
          // 模态框状态取反
          this.addDialogFormVisible = !this.addDialogFormVisible;
          let { code, msg } = await addEditqualification(this.addForm);
          if (code === 200) {
            this.fetchData();
            this.$message({
              type: "success",
              message: msg,
            });
            // 添加表单
            this.addForm = {
              name: "",
              orderNumber: "",
            };
          }
        } else {
          return false;
        }
      });
    },
    // 删除
    async handleDel(row) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let { code, msg } = await delQualification({
            uuid: row.uuid,
          });

          if (code === 200) {
            this.$message({
              type: "success",
              message: msg,
            });
            this.fetchData();
          } else {
            this.$message({
              type: "danger",
              message: msg,
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 切换状态
    changeStatu(row) {
      if (row.status === 0) {
        qualificationDisable({ uuid: row.uuid });
        this.fetchData();
      } else if (row.status === -1) {
        qualificationActive({ id: row.uuid });
        this.fetchData();
      }
      this.fetchData();
    },
    // 修改触发
    async handleEdit(row) {
      let res = await editQualificationShow({ uuid: row.uuid });
      let { name, orderNumber } = res.data;
      this.editForm = { name, orderNumber, uuid: row.uuid };
      this.editDialogFormVisible = true;
    },
    // 提交修改
    async submitEdit() {
      this.$refs.editForm.validate(async (valid) => {
        if (valid) {
          // 模态框状态取反
          this.editDialogFormVisible = !this.editDialogFormVisible;
          let { code, msg } = await addEditqualification(this.editForm);
          if (code === 200) {
            this.fetchData();
            this.$message({
              type: "success",
              message: msg,
            });
          }
        } else {
          return false;
        }
      });
    },
    // 获取数据
    async fetchData() {
      // 发送请求 获取账号列表
      let res = await getQualificationList({
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize,
        // 查询参数
        name: this.searchForm.name,
        status: this.searchForm.status,
      });
      // 解构数据
      let { code, data } = res;
      // 边界判断
      if (!data.resList.length && this.pagination.pageNum !== 1) {
        this.pagination.pageNum -= 1;
        this.fetchData();
      }
      // 赋值渲染
      if (code === 200) {
        this.pagination.total = data.totals;
        this.tableData = data.resList;
      }
      let respons = await getShenbaoDownWindow();
      this.selectOptions = respons.data;
    },
    // 当前页改变
    currentChange(event) {
      this.pagination.pageNum = event;
      this.fetchData();
    },
  },
  created() {
    this.fetchData();
  },
};
</script>

<style lang="less" scoped>
.application_qualification_management {
  .application_qualification_management_header {
    display: flex;
    justify-content: space-between;
  }
  .pagination {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
